<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			b ody{
				width: 100%;
				height: 1000000px;
				background-image: url(img/妙蛙种子.png);
				background-size:cover; 
				/* 函数 cover 等比例放大图片 特点：原图按照比例放大存背景空间
				 【开发者背景图大小是否等于背景空间】
				 contain 等比例缩放图片 特点：图片按照比例缩放存背景空间
				 【开发者：背景图片等比例显示在背景空间】
				 */
				/* 背景附件--尺寸存在cover或者contain*/
				background-attachment: fixed;/* 背景图固定 scroll 不固定· */
			}
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #fff00f;
				background-image:url(img/妙蛙种子.png);
				/* 问题：超大图-不显示  小图显示
				注意：背景空间大小，如果小于背景空间--平铺
				*/
			   background-repeat: no-repeat;   
			   /* 不平铺 repeat-x，y 横纵平铺*/
			   background-size: 30%;
			   /* 背景尺寸属性：数值px % |函数 cover contain*/
			   /* 背景定位：背景空间大于背景图 关键字：center、left、right、top*/
			   background-position: 80% 0;
			}
		</style>
	</head>
	<body>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur autem laborum maiores ex consectetur eius nam nemo porro! Error, porro? Porro minus quam labore, pariatur corrupti consectetur veritatis quis facilis!lorem
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga et odio magnam ea, vitae ex voluptatum nam, reprehenderit sunt molestias, explicabo atque facilis delectus autem. Itaque doloremque consequuntur mollitia saepe? Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum enim, dolorem illum doloribus minus sed minima at et, nobis necessitatibus eaque quibusdam. Officia, magnam exercitationem! Doloremque ipsam rem aut a.
		<!--html-img图片 引入一张图片，位置不可随意改变
		css 背景图片 引入一张图片，位置随意改变
		子属性：background-color 背景颜色
		        background-image 背景图
				 background-repeat 背景重复
				  background-size 背景尺寸
				   background-attachment 背景附件
				    background-position 背景定位
		复合属性：background : background-image background-color  background-position 
		                      background-size  background-repeat  background-attachment
	    简写属性 background: background-image background-position | background-size background-repeat 
		代替子属性background-image  background-color background-repeat
		-->
		<div></div>
	</body>
</html>